<template>
  <div class="modifyBox">
    <ul class="title">
      <li>
       修改密码
      </li>
    </ul>
    
    <img
      src="../assets/img/close.png"
      alt=""
      id="closeIcon"
      @click="closePop"
    />
  </div>
</template>

<script>
export default {
  name: "modifyBox",
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>

<style scoped>
.modifyBox {
  width: 30rem;
  /* height: 22rem; */
  padding: 0.6rem 0 3rem;
  background: white;
  border-radius: 0.8rem;
  /* box-shadow: inset -5px  -8px 12px #d5d5d5; */
  position: relative;
  margin: 8rem auto 0;
}
ul.title {
  width: 100%;
  height: 3rem;
  /* margin: 0 auto; */
  display: flex;
  justify-content: center;
  font-size: 1.2rem;
  /* border-bottom: 1px solid  #bfbfbf; */
  /* font-weight: bold; */
  /* background: pink; */
}
ul.title li {
  width: 5rem;
  margin: 0 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.6rem;
  cursor: pointer;

  /* background: yellow; */
}
ul.title li a {
  color: #999999;
}
ul.title li:hover {
  border-bottom: 1px solid black;
}
ul.title li:hover a {
  color: #595959;
}
#closeIcon {
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  cursor: pointer;
}
</style>